<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染v-if</title>
    <style>
        img{
            width: 200px;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
 条件渲染：
     v-if:
         适用于：切换频率很低的场景
         特点：不展示的DOM节点直接被删除
     v-show:
         适用于：切换频率很高的场景
         特点：不展示的DOM节点没有被删除，仅仅是使用样式隐藏掉

     严重注意：使用v-if的时，DOM节点可能无法获取到，而使用v-show一定可以获取到DOM节点。
-->
<div id="root">
    <button @click="changeWeather">切换天气</button>
    <h2>今天天气很{{text}}</h2>
    <div v-if="isHot===0">
        <img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" alt=""><br/>
        <span>建议：心静自然凉</span>
    </div>
    <div v-else-if="isHot===1">
        <img src="https://img0.baidu.com/it/u=2181452007,1100013642&fm=26&fmt=auto&gp=0.jpg" alt=""><br/>
        <span>建议：不冷不热就好好学习吧</span>
    </div>
    <div v-else="isHot===2">
        <img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" alt=""><br/>
        <span>建议：穿好你秋裤</span>
    </div>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    new Vue({
        el:"#root",
        data(){
            return {
                isHot:0//0炎热 1温暖 2寒冷
            }
        },
        methods:{
            changeWeather(){
            this.isHot+=1
                if(this.isHot>2) this.isHot=0// 设置边界 只取 0 1 2
            }
        },
        computed:{
            text(){
                if (this.isHot===0) return "炎热"
                else if (this.isHot===1) return "温暖"
                else return "寒冷"
            }
        }
    })
</script>
</body>
</html>